<template>
    <div>
        <div class="cameraList" v-if="suoTag">
            <i @click="close"></i>
            <span>相机列表</span>
            <div class="cameraScroll">
                <div class="cameraBox" v-for="(item) in cameraList" :key="item.id">
                    <h3 @click="toggle(item.id)">{{ item.title }}</h3>
                    <ul v-if="item.status" class="">
                        <li v-for="item1 in item.children" :key="item1.id" @click="toggleLi(item.title, item1.c, $event)">
                            {{ item1.title }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="Preset" v-if="tags">
            <div v-for="item in list1" :key="item.id" @click="xjld(item.id, item.num)"></div>
        </div>
        <el-button v-if="tags" class="oBtn" @click="oSb1">{{ oSb }}</el-button>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue"
const emits = defineEmits(['editcameraList', 'videoView', 'toggle', 'dlogPlay'])
import http from "axios"
import { ta } from "element-plus/es/locale";
let tags = ref(false)
let suoTag = ref(true)
const props = defineProps(["isShow", 'textData']);

// let list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24])
let list1 = ref([
    {
        id: 0,
        num: 201,
    },
    {
        id: 1,
        num: 202,
    },
    {
        id: 2,
        num: 203,
    },
    {
        id: 3,
        num: 204,
    },
    {
        id: 4,
        num: 205,
    },
    {
        id: 5,
        num: 206,
    },
    {
        id: 6,
        num: 207,
    },
    {
        id: 7,
        num: 208,
    },
    {
        id: 8,
        num: 209,
    },
    {
        id: 9,
        num: 210,
    },
    {
        id: 10,
        num: 211,
    },
    {
        id: 11,
        num: 212,
    },
    {
        id: 12,
        num: 213,
    },
    {
        id: 13,
        num: 214,
    },
    {
        id: 14,
        num: 215,
    },
    {
        id: 15,
        num: 216,
    },
    {
        id: 16,
        num: 217,
    },
    {
        id: 17,
        num: 218,
    },
    {
        id: 18,
        num: 219,
    },
    {
        id: 19,
        num: 220,
    },
    {
        id: 20,
        num: 221,
    },
    {
        id: 21,
        num: 222,
    },
    {
        id: 22,
        num: 223,
    },
    {
        id: 23,
        num: 224,
    }
])
const close = () => {
    emits('editcameraList', false)
}
const cameraList = ref([
    {
        id: 0,
        title: '北停车场',
        status: false,
        children: [
            {
                id: 0,
                title: '细节联动',
                c: 0
            },

        ]
    },
    {
        id: 1,
        title: '滨湖大道桥',
        status: false,
        children: [
            {
                id: 0,
                title: '细节联动',
                c: 1
            },

        ]
    },
    {
        id: 2,
        title: '滨湖大道中',
        status: false,
        children: [
            {
                id: 0,
                title: '细节联动',
                c: 2
            },

        ]
    },
    {
        id: 3,
        title: '滨湖路',
        status: false,
        children: [
            {
                id: 0,
                title: '细节联动',
                c: 3
            },
        ]
    },
    {
        id: 4,
        title: '滨湖路口',
        status: false,
        children: [
            {
                id: 0,
                title: '细节联动',
                c: 4
            },

        ]
    },
    {
        id: 5,
        title: '图书馆',
        status: false,
        children: [
            {
                id: 0,
                title: '细节联动',
                c: 5
            },

        ]
    },
    {
        id: 6,
        title: '西北停车场',
        status: false,
        children: [
            {
                id: 0,
                title: '细节联动',
                c: 6
            },

        ]
    },
    {
        id: 7,
        title: '熏华路中',
        status: false,
        children: [
            {
                id: 0,
                title: '细节联动',
                c: 7
            },

        ]
    },
    {
        id: 8,
        title: '昭亭南路南',
        status: false,
        children: [
            {
                id: 0,
                title: '细节联动',
                c: 8
            },

        ]
    },
])
// 名称 大标题
const toggle = (index: any) => {
    let oH3 = document.getElementsByTagName("h3");
    for (var i = 0; i < oH3.length; i++) {
        oH3[i].style.background = ""
        // cameraList.value[i].status = false
    }
    cameraList.value[index].status = !cameraList.value[index].status;
    oH3[index].style.background = "rgb(79, 224, 217)"
    emits('toggle', index)//飞行到视角
    tags.value = false
}
// 细节联动 
let oT = ref('')
let oC = ref('')
let oE = ref('')
let oSb = ref('锁定')

const toggleLi = (t: any, c: any, e: any) => {
    let oLi = document.getElementsByTagName("li");
    for (var i = 0; i < oLi.length; i++) {
        oLi[i].style.background = ""
    }
    e.target.style.background = "rgb(79, 224, 119)"
    // emits('videoView', { tag: true, text: e.target.innerText, c: c })
    tags.value = true
    emits('videoView', { tag: false, text: t, c: c })//细节联通组件 相机名字
    // emits('dlogPlay', c)//请求对应视频
    oT.value = t
    oC.value = c
    oE.value = e
}
const xjld = (e: any, num: any) => {
    console.log(e);
    emits('videoView', { tag: true, text: oT.value, c: oC.value })//细节联通组件 相机名字
    emits('dlogPlay', oC.value, num)//请求对应视频
}
const oSb1 = () => {
    if (suoTag.value) {
        oSb.value = '解锁'
        suoTag.value = false
    } else {
        oSb.value = '锁定'
        suoTag.value = true
    }

}
</script>
<style scoped>
.Preset {
    position: absolute;
    z-index: -1;
    top: -1.9rem;
    left: 0rem;
    /* background-color: red; */
    width: 100vw;
    height: 86vh;
}

.Preset div {
    display: flex;
    display: inline-block;
    width: 4rem;
    height: 2.8rem;
    /* border: 1px solid rgb(150, 151, 151); */
    box-sizing: border-box;
    /* background-color: red; */
    /* justify-content: space-around; */
    background-color: rgba(0, 0, 0, .0);
}

.Preset div:hover {
    /* border: 3px solid yellow; */

}

.cameraList {
    position: relative;
    width: 3.125rem;
    height: 6.25rem;
    background-image: url("../assets/img/border_2.png");
    background-repeat: no-repeat;
    background-size: 3.125rem 6.25rem;

}

.cameraList span {
    display: block;
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-size: .225rem;
    line-height: .85rem;
}

.cameraList i {
    position: absolute;
    cursor: pointer;
    top: .1rem;
    right: .1rem;
    width: .35rem;
    height: .35rem;
    background-image: url("../assets/img/close.png");
    background-repeat: no-repeat;
    background-size: .35rem .35rem;
    z-index: 1;
}

.cameraScroll {
    height: 5rem;
    overflow-y: scroll;

}

.cameraBox {
    margin: 0 auto;
    padding: 0 .25rem;
    cursor: pointer;
    /* transition: height 1s linear; */
}

::-webkit-scrollbar {
    display: none;
}

.cameraBox h3 {
    height: .375rem;
    line-height: .375rem;
    color: #fff;
    font-size: .225rem;
    font-weight: normal;
    border-radius: .0375rem;
}

.cameraBox h3:hover {
    background-color: rgb(79, 224, 217);
    /* margin: 0 .125rem; */
}

.cameraBox ul {
    /* display: none; */
    /* height: 3.75rem; */
}

.cameraBox ul li {
    padding-left: .25rem;
    /* background-color: rgb(197, 236, 234); */
    border-radius: .0375rem;
    height: .375rem;
    line-height: .375rem;
    color: #fff;
}

.cameraBox ul li:hover {
    background-color: rgb(197, 236, 234);
    color: rgb(59, 58, 58);
}

.oBtn {
    position: fixed;
    top: -2rem
}
</style>